<template>
	<view class="content">
		<view class="app-title ac flexTitle">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>{{type==0?'实时报警':'历史报警'}}
			<image class="select" src="/static/img/filter.png" @click="show_search = true">
		</view>
		<view class="my-work ac">
		<!-- 	<view class="fl menu ac">
				<view :class="{ on: tab == 0 }" @click="setTab(0)"><b>实时报警</b></view>
				<view v-show="totalAlarm > 0 && tab == 0" class="num ac">{{
          totalAlarm >= 99 ? 99 + "+" : totalAlarm
        }}</view>
			</view>
			<view class="fl menu ac">
				<view :class="{ on: tab == 1 }" @click="setTab(1)"><b>历史报警</b></view>
				<view v-show="totalAlarm > 0 && tab == 1" class="num ac">{{
          totalAlarm >= 99 ? 99 + "+" : totalAlarm
        }}</view>
			</view>
			<view class="fl menu ac" @click="show_search = true">
				<view>筛选<image class="select" src="/static/img/select.png"></image>
				</view>
			</view> -->

			<view class="clearfix"></view>
		</view>

		<view class="work-item">
			<view class="item" @click="jumpUrl(item.NAME)" v-for="(item, index) in list"
				v-if="(item.SUM > 0 && tab == 0) || tab == 1" :key="index">
				<view class="line one fl" :style="{ background: item.lineColor || 'transparent' }"></view>
				<view class="fl" style="width: 24%">{{ item.NAME }}</view>
				<view class="fl total"><b style="font-size: 18px">{{ item.SUM }}</b>条报警</view>
				<view class="fl">
					<!-- <image class="icon" src="/static/img/alarm-icon.jpg"></image> -->
					<view class="wan_circle" :style="{ background: item.color || 'transparent' }"></view>
				</view>
				<view class="clearfix"></view>
			</view>
			<!-- <view class="item">
				<text class="line two fl"></text>
				<text class="fl">二号线</text><text class="fl total"><b style="font-size: 18px;">8</b>条报警</text>
				<text class="fl"><image class="icon" src="/static/img/alarm-icon.jpg"></image></text>
				<view class="clearfix"></view>
			</view>
			<view class="item">
				<text class="line three fl"></text>
				<text class="fl">三号线</text><text class="fl total"><b style="font-size: 18px;">8</b>条报警</text>
				<text class="fl"><image class="icon" src="/static/img/alarm-icon.jpg"></image></text>
				<view class="clearfix"></view>
			</view>
			<view class="item">
				<text class="line four fl"></text>
				<text class="fl">四号线</text><text class="fl total"><b style="font-size: 18px;">8</b>条报警</text>
				<text class="fl"><image class="icon" src="/static/img/alarm-icon.jpg"></image></text>
				<view class="clearfix"></view>
			</view> -->
		</view>

		<MyWorkSearch :tab="tab" v-show="show_search" @closeFull="closeFull"></MyWorkSearch>
	</view>
</template>

<script>
	import MyWorkSearch from "../../components/alarm/alarmSearch";
	import {
		ALARM_APP_CONTROLLER
	} from "../../api/alarm";
	export default {
		components: {
			MyWorkSearch,
		},
		data() {
			return {
				tab: 0,
				start: this.getToday(), //+ " 00:00:00",
				end: this.getToday(), //+ " 23:59:59",
				list: [],
				level: "1,2,3,10",
				status: "",
				status1: "",
				status2: "",
				show_search: false,
				type:'',
			};
		},
		onLoad(option) {
			this.type = option.type
		},
		computed: {
			totalAlarm() {
				let num = 0;
				for (let i in this.list) {
					if (num > 99) return (num = 99);
					num += this.list[i].SUM;
				}
				return num;
			},
		},
		watch: {
			"$store.state.wsAlarmValue": function(newVal) {
				this.initList();
			},
		},
		created() {
			this.setTab(this.type)
			// this.initList();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			setTab(i) {
				if (this.tab == i) return;
				this.tab = i;
				// this.start = this.getToday();
				// this.end = this.getToday();
				// this.initList();
			},
			closeFull(obj) {
				if (obj) {
					this.start = obj.start.replace(/\//g, "-");
					this.end = obj.end.replace(/\//g, "-");
					this.show_date = true;
					this.level = obj.level;
					this.status = obj.status;
					this.status1 = obj.status1;
					this.status2 = obj.status2;
					this.initList();
				}
				this.show_search = false;
			},
			jumpUrl(name) {
				uni.navigateTo({
					url: "/pages/alarm/alarmList?line=" +
						name +
						"&tab=" +
						this.tab +
						"&level=" +
						this.level +
						"&restoreFlag=" +
						this.status +
						"&handleFlag=" +
						this.status1 +
						"&maintainFlag=" +
						this.status2 +
						"&start=" +
						this.start +
						"&end=" +
						this.end+
						"&type=" +this.type,
				});
			},
			initList() {
				let obj = {
					levels: this.level,
					start: this.start,
					end: this.end,
				};
				if (this.tab === 0) {
					(obj.pushFlag = 1), (obj.restoreFlag = this.status);
					delete obj.handleFlag;
					delete obj.maintainFlag;
				}
				if (this.tab === 1) {
					// if(this.status1 !==''){
					// 	obj.handleFlag = this.status1
					// }
					// if(this.status2 !==''){
					// 	obj.maintainFlag = this.status2
					// }
					// delete obj.pushFlag
					// delete obj.restoreFlag
					(obj.pushFlag = 1), (obj.restoreFlag = this.status);
				}
				// if(this.status !== '') obj.handleFlag = this.status;
				this.list = [];
				this.fetch(
					"POST",
					this.baseUrl() + ALARM_APP_CONTROLLER.POST_LINE_ALARM_COUNT,
					obj,
					false
				).then((res) => {
					if (res.returnCode == 2002) {
						let alarmLevels = {};
						this.$store.state.alarmLevels.forEach((item) => {
							alarmLevels[item.code] = item;
						});
						this.list = res.data.map((item) => ({
							...item,
							color: alarmLevels[item.LEVELS]?.props?.color ||
								alarmLevels["*"].props.color,
						}));
						console.log('this.list--',this.list)
					}
				});
			},
		},
	};
</script>

<style scoped lang="less">

	.flexTitle {
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.my-work {
		background: #fff;
		margin-bottom: 16px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}

	.my-work>.menu {
		width: 37.5%;
		color: #3e3a39;
		line-height: 54px;
		position: relative;
	}

	.my-work>.menu:nth-child(3) {
		border-left: 1px solid #d7d7d7;
		width: 25%;
	}

	.my-work>.menu view {
		display: inline-block;
	}

	.my-work>.menu>.on {
		color: #307be0;
		border-bottom: 2px solid #307be0;
	}

	.my-work>.menu>.num {
		position: absolute;
		top: 10px;
		right: 20%;
		background: #fa5151;
		/* width: 15px; */
		height: 15px;
		font-size: 10px;
		border-radius: 50%;
		color: #fff;
		line-height: 14px;
		padding: 0 5px;
	}

	.select {
		width: 15px;
		height: 15px;
		margin-left: 5px;
		vertical-align: middle;
	}

	.work-item {
		width: 91.5%;
		margin: 0 auto;
	}

	.work-item>.item {
		line-height: 50px;
		font-size: 14px;
		margin-top: 16px;
		background: #ffffff;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		padding-left: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.work-item>.item>.line {
		width: 30px;
		height: 8px;
		margin-right: 20px;
		/* margin-top: 22px; */
	}

	.work-item>.item>.total {
		margin-right: auto;
		height: 50px;
		width: 100px;
		overflow: hidden;
	}

	.work-item>.item .icon {
		width: 26px;
		height: 26px;
		vertical-align: middle;
	}

	.one {
		background: #e93636;
	}

	.two {
		background: #ed983b;
	}

	.three {
		background: #71c76f;
	}

	.four {
		background: #da8aff;
	}

	.wan_circle {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		/* margin-top: 7px; */
		margin-right: 7px;
	}
</style>